<template>
	<view>
		<header-box :statusHeight="statusHeight"></header-box>
		<!-- 显示图标 -->
		<!-- <uni-notice-bar scrollable="true" :speed="50" single="true" showIcon="true" text="[多行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar> -->
		<!-- 顶部菜单 -->
		<view class="kinds-box flex">
			<view class="left">
				<view class="flex" v-for="(item,index) in 20" :key="'al'+index" :class="{active:tabIndex == index}" @click="changeLeft(index)">左侧菜单</view>
			</view>
			<view class="right">
				<block v-if="false">
					<view class="list flex-between" v-for="(item,index) in 15" :key="'ar'+index">
						<image src="/static/imgs/menus1.jpg" mode="aspectFill"></image>
						<view class="list-right flex-between">
							<view class="h3">大白菜</view>
							<view class="price-add flex-between">
								<view class="price"><text>￥15</text>/斤</view>
								<view class="iconfont iconAddwithcircleF"></view>
							</view>
						</view>
					</view>
					<car></car>
				</block>
				
				<view class="empty flex-center" v-else>
					暂无清单
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import HeaderBox from '@/components/header.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import tabs from '@/components/haverster-slidingMenu/haversterSlidingMenu.vue'
	import Car from "@/components/car.vue"
	export default {
		components:{
			HeaderBox,uniNoticeBar,tabs,Car
		},
		data() {
			return {
				statusHeight:0,
				tabList:['蔬菜豆制品','时令水果','肉禽类','蛋品面食','方便素食'],
				showPopup:false,
				tabIndex:0
			};
		},
		onLoad() {
			this.statusHeight = uni.getStorageSync('statusHeight') + 'px'
		},
		methods:{
			changeMenus(e){
				console.log(e)
			},
			changeLeft(index){
				this.tabIndex = index;
			}
		}
		
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	.empty{
		height: 30vh;
		font-size: 28rpx;
		color:#999;
	}
	.kinds-box{
		overflow: hidden;
		height: calc(100vh - 200rpx);
		align-items: flex-start;
		.left{
			width: 160rpx;
			height: 100%;
			background: #f2f3f4;
			overflow-y: scroll;
			view{
				height: 80rpx;
				font-size: 26rpx;
				padding: 0 25rpx;
				&.active{
					background: white;
					font-weight: bold;
				}
			}
		}
		.right{
			width: calc(100vw - 160rpx);
			box-sizing: border-box;
			padding: 0 25rpx;
			height: 100%;
			overflow-y:scroll ;
			.list{
				padding: 20rpx 0;
				
				image{
					width: 150rpx;
					height: 150rpx;
					border-radius: 20rpx;
				}
				.list-right{
					width: 370rpx;
					flex-direction: column;
					align-items: flex-start;
					height: 150rpx;
					.h3{
						font-size: 32rpx;
						font-weight: bold;
					}
					.price-add{
						width: 100%;
					}
					.price{
						font-size: 28rpx;
						color:#666;
						text{
							font-size: 34rpx;
							color:red;
							font-weight: bold;
						}
					}
					.iconfont{
						color:#039702;
						font-size: 36rpx;
					}
				}
			}
		}
	}
</style>
